<template>
  <div class="free-table">
    <el-table
      class="my-table nowrap-th"
      ref="elTable"
      :data="data"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template v-for="(item, i) in tbColumns">
       
        <free-column v-bind="$attrs" :column="item">
          <!-- 插槽内容透传 -->
          <template
            v-for="(index, name) in $scopedSlots"
            v-slot:[name]="scopeData"
          >
            <slot :name="name" v-bind="scopeData"> </slot>
          </template>
        </free-column>
      </template>
    </el-table>

    <template v-if="pagination">
      <pagination v-if="data.length > 0" v-bind="$attrs" v-on="$listeners" />
    </template>
  </div>
</template>

<script>
import FreeColumn from "./column.vue";
import Pagination from "../pagination/index.vue";

export default {
  name: "configurableTable",
  inheritAttrs: false,
  components: {
    Pagination,
    FreeColumn,
  },
  props: {
    data: Array,
    column: Array,
    columnsProps: Object,
    pagination: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    tbColumns() {
      const { column, columnsProps: props } = this;

      return column.map((col) => {
        const it = Object.assign({}, props, col);
        return it;
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/css/_diy-elementui.scss";
</style>
